<template>
	<view class="order-view">
		<view class="order-view-navigator">
			<view @click="orderFilterChange(item.value)" class="order-view-navigator-item" v-for="item in navigatorData" :key="item.name">
				<view class="order-view-navigator-item-text">{{item.name}}</view>
				<view :class="item.value == navigatorActive ? 'navigator-active' : ''"></view>
			</view>
		</view>
		<view class="order-view-list">
			<view class="order-view-list-item-group" v-for="item in orderListData" :key="item.id">
				<view class="order-view-list-item-head">
					<image :src="orderTypeImage[item.orderType]"></image>
					<view class="order-view-list-item-head-type">
						<text>{{item.orderType}}</text>
					</view>
					<view class="order-view-list-item-head-status">
						<text>{{item.orderStatus}}</text>
					</view>
				</view>
				<view class="order-view-list-item-body">
					<image :src="item.orderImage"></image>
					<view class="order-view-list-item-body-info">
						<view class="order-view-list-item-body-info-order-start-time label">
							<text>下单时间:</text>
							<text>{{item.orderStartTime}}</text>
						</view>
						<view class="order-view-list-item-body-info-payment label">
							<text>支付金额:</text>
							<text>¥ {{item.payment}}</text>
						</view>
					</view>
				</view>
				<view class="order-view-list-item-button-group">
					<button type="default" size="mini">评价</button>
					<button type="default" size="mini">售后</button>
					<button type="default" size="mini">再来一单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navigatorData: [
					{
						name: '全部',
						value: ''
					},
					{
						name: '进行中',
						value: 'processing'
					},
					{
						name: '待评价',
						value: 'evaluating'
					}
				],
				navigatorActive: '',
				orderTypeImage: {
					'外卖订购': '/static/icon/xiangxiangda.svg'
				},
				orderListData: [
					{
						id: 'abc',
						orderType: '外卖订购',
						orderStatus: '进行中',
						orderImage: '/static/partener.jpg',
						orderStartTime: '2022-02-02 02:02',
						payment: 23.22
					},
					{
						id: 'abcd',
						orderType: '外卖订购',
						orderStatus: '进行中',
						orderImage: '/static/partener.jpg',
						orderStartTime: '2022-02-02 02:02',
						payment: 24.22
					},
					{
						id: 'abce',
						orderType: '外卖订购',
						orderStatus: '进行中',
						orderImage: '/static/partener.jpg',
						orderStartTime: '2022-02-02 02:02',
						payment: 25.22
					},
					{
						id: 'abc',
						orderType: '外卖订购',
						orderStatus: '进行中',
						orderImage: '/static/partener.jpg',
						orderStartTime: '2022-02-02 02:02',
						payment: 23.22
					},
					{
						id: 'abcd',
						orderType: '外卖订购',
						orderStatus: '进行中',
						orderImage: '/static/partener.jpg',
						orderStartTime: '2022-02-02 02:02',
						payment: 24.22
					},
					{
						id: 'abce',
						orderType: '外卖订购',
						orderStatus: '进行中',
						orderImage: '/static/partener.jpg',
						orderStartTime: '2022-02-02 02:02',
						payment: 25.22
					}
				]
			}
		},
		methods: {
			orderFilterChange(value) {
				this.navigatorActive = value
			}
		}
	}
</script>

<style scoped lang="scss">
	.order-view {
		
		.order-view-navigator {
			display: flex;
			position: absolute;
			top: 0;
			
			.order-view-navigator-item {
				width: 120rpx;
				margin-top: 20rpx;
				text-align: center;
				border-right: 1rpx solid cadetblue;
				border-left: 1rpx solid cadetblue;
				display: flex;
				flex-wrap: wrap;
				
				.order-view-navigator-item-text {
					width: 100%;
					text-align: center;
				}
				
				.navigator-active {
					width: 60rpx;
					height: 4rpx;
					margin-left: 30rpx;
					background-color: cadetblue;
				}
			}
		}
		
		.order-view-list {
			height: calc(100vh - 250rpx);
			overflow-y: auto;
			margin-top: 80rpx;
			
			.order-view-list-item-group {
				background-color: #eeeeee;
				width: 710rpx;
				margin-left: 20rpx;
				border-radius: 20rpx;
				border: 1rpx solid #cccccc;
				margin-top: 10rpx;
				
				.order-view-list-item-head {
					display: flex;
					flex-wrap: wrap;
					line-height: 60rpx;
					align-items: center;
					border-bottom: 1rpx solid #cccccc;
					
					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 30rpx;
						margin: 0rpx 10rpx;
					}
					
					.order-view-list-item-head-type {
						width: 500rpx;
					}
					
					.order-view-list-item-head-status {
						width: 130rpx;
						text-align: center;
					}
				}
				
				.order-view-list-item-body {
					display: flex;
					min-height: 160rpx;
					align-items: center;
					
					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 20rpx;
						margin: 0 20rpx;
					}
					
					.order-view-list-item-body-info {
						.label {
							text:nth-child(1) {
								margin-right: 10rpx;
							}
						}
					}
				}
				
				.order-view-list-item-button-group {
					height: 70rpx;
					align-items: center;
					
					button {
						float: right;
						margin: 0 10rpx 0 0;
					}
				}
			}
		}
	}
</style>